import React from "react";
import './user.css'
// import './reset.css'
export default class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            account:'',//用户名
            val:'',//手机号
            password:'',//密码
            s:false,//设置用户名长度
            yong:false,//用户验证
            shou:false,//手机号验证
            changdu:false,//密码长度
            ma:false,//密码设置
            blue:false,//用户名边框
            blue1:false,//手机号边框
            red:false,//密码边框
            bool1:'',
            bool2:'',
            bool3:'',
        }
        this.ref = React.createRef()
        this.ref1 = React.createRef()
        this.ref2 = React.createRef()
    }
    accounthandle(e){
        this.setState({
            account:e.target.value
        })
    }
    focushandle(){ //用户名
        this.setState({
            blue:true,
            s:true,
        })
       
    }
    blurhandle(){ //用户名
        this.setState({
            blue:false,
            s:false,
            yong:false
        })
        var rega = /^[0-9a-zA-Z\u4e00-\u9fa5_]+$/   
        var regb = /^[0-9]+$/                     
        var regc = /[\u4e00-\u9fa5]/g  
        var bool = rega.test(this.state.account);
        var bool2 = regb.test(this.state.account);
        var bool3;
        var matchRes = this.state.account.match(regc);  
        if(matchRes){ //带汉字长度验证
            var len = matchRes.length;
             bool3 = len*2 + this.state.account.length-len <=14; 
           
         }else{ // 不带汉字长度验证
             bool3 = this.state.account.length<=14
         }
         if(!bool||bool2){
            if(this.state.account!=''){
                this.setState({
                    yong:true
                })
            }
        }
        if(!bool3){
            if(this.state.account!=''){
                this.setState({
                    yong:true
                })
            }
        }
    }
    focus1(){ //手机号
        this.setState({
            blue1:true,
        })
    }
    blur1(){ //手机号
        this.setState({
            blue1:false
        })
        if(!/^1[3-9][0-9]{9}$/.test(this.state.val)){
            this.setState({
                shou:true
            })
        }else{
            this.setState({
                shou:false
            })
        }
    }
    inp1(e){
        this.setState({
            val:e.target.value
        })
    }
    focus2(){
        this.setState({
            changdu:true,
            ma:false,
            red:true,
        })
       
    }
    inphandle(e){
        console.log(e.target.value);
        this.state.password = e.target.value
        this.setState({
            password:this.state.password,
        })
    }
    blur2(){
        this.setState({
            ma:true,
            changdu:false,
        })
        var reg1 = /(?=.*[0-9])(?=.*[a-zA-Z])|(?=.*[0-9])(?=.*[^\w]|_)|(?=.*[^\w]|_)(?=.*[a-zA-Z])/
        // 中文
        var reg2 = /[\u4e00-\u9fa5\s]/
        var bool4 = reg1.test(this.state.password);
        var bool5 = reg2.test(this.state.password);  // true 代表有中文
        var bool6 = this.state.password.length>=8&&this.state.password.length<=14
        if(!bool4||bool5||!bool6){// 提示
            // 密码设置不符合要求
          this.setState({
            ma:true,
          })
        }else{
            // 通过验证
            this.setState({
                ma:false,
                red:false
              })
        }
    }
    keyup(){
        var reg1 = /(?=.*[0-9])(?=.*[a-zA-Z])|(?=.*[0-9])(?=.*[^\w]|_)|(?=.*[^\w]|_)(?=.*[a-zA-Z])/
        var reg2 = /[(\u4e00-\u9fa5)\s*]/
            this.setState({
                bool1 : reg1.test(this.state.password),
                bool2 : reg2.test(this.state.password),
                bool3 : this.state.password.length>=8&&this.state.password.length<=14
            })
        console.log(this.ref.current.className='impwhite');
        if (this.state.bool3) {
            this.ref1.current.className='impwhite'
        } else{
            this.ref1.current.className='inpred'
        }
        if(this.state.bool1){
            this.ref2.current.className='impwhite'
        }else{
            this.ref2.current.className='inpred'
        }
        // if(this.state.bool2){
        //     this.ref.current.className='inpred'
        // } else{
        //     this.ref.current.className='impwhite'
        // }

    }
    clk(){
        this.setState({
            changdu:true,
            ma:false,
        })
    }
    render() {
        return <div id="html">
            <div className="nav-s">
                <span>帮助中心</span> <span>|</span>
                <span>2021 @Baidu</span>
            </div>
            <h1>
                用科技
                <div>让复杂的世界更简单</div>
            </h1>
            <img src="https://passport.baidu.com/static/passpc-account/img/baidu.png" alt="" />
            <div className="app">
                <h3>
                    欢迎注册
                    <p className="p1">已有账号？<a href="#">登录</a></p>
                </h3>
                <form action="" className="form1">
                   {this.state.s&& <span className="pa">
                        设置后不可更改,中英文均可,最长14个英文或7个汉字
                    </span>}
                    {this.state.yong&&<span className="pba">用户名仅支持中英文、数字和下划线,且不能为纯数字</span>}
                    用户名 &nbsp;
                    <input type="text"
                        placeholder="请设置用户名"
                        className={`input inp1 inputactive ${this.state.blue?'blur':''}`} 
                        onFocus={this.focushandle.bind(this)}
                        onBlur={this.blurhandle.bind(this)}
                        value={this.state.account}
                        onInput={this.accounthandle.bind(this)} 
                        />
                    <span className="span1"></span>
                </form>
                <form action="">
                    手机号&nbsp;
                    <input  type="text"  placeholder="可用于登录和找回密码"
                    value={this.state.val}
                        className={`input inp2 ${this.state.blue1?'blur':''}` }
                        onFocus={this.focus1.bind(this)}
                        onBlur={this.blur1.bind(this)}
                        onInput={this.inp1.bind(this)}
                        />
                   {this.state.shou&& <span className="span2">手机号码格式不正确</span>}
                </form>
                <form action="" className="mi">
                  {this.state.changdu&&<section className="pb cf">
                        <p className='t1 cf' ref={this.ref1}>
                            <img src="./img/对号.png" alt="" className="d" />
                            <img src="./img/叉号.png" alt="" className="x" />
                            <em>长度为8~14个字符</em>
                        </p>
                        <p className='t2 cf' ref={this.ref2}>
                            <img src="./img/对号.png" alt="" className="d" />
                            <img src="./img/叉号.png" alt="" className="x" />
                            <em>字母/数字以及标点符号至少包含2种</em>
                        </p>
                        <p className={`t3 cf ${this.state.bool2?'inpred':'impwhite'}`}  ref={this.ref}>
                            <img src="./img/对号.png" alt="" className="d" />
                            <img src="./img/叉号.png" alt="" className="x" />
                            <em>不允许有空格、中文</em>
                        </p>
                        <span></span>
                    </section>}
                    {this.state.ma&&<span className="span3" >密码设置不符合要求</span>}
                    密&nbsp;码&nbsp;&nbsp;&nbsp;
                    <input type="text" value={this.state.password} onInput={this.inphandle.bind(this)}
                        placeholder="请设置登录密码"
                        className={`input inp3 ${this.state.red?'red':''}`}
                        onFocus={this.focus2.bind(this)}
                        onBlur={this.blur2.bind(this)}
                        onKeyUp={this.keyup.bind(this)}
                        />
                        <span className="new-password-tip" onClick={this.clk.bind(this)} id="TANGRAM__PSP_4__newPwdTip"></span>
                </form>
                <form action="">
                    <span className="span4">验证码不正确</span>
                    验证码&nbsp;&nbsp;<input
                        type="text"
                        placeholder="请输入验证码"
                        className="input1 inp4"
                        
                        />
                    <span className="span">获取验证码</span>
                </form>
                <a href="#" className="a">注册</a>
                <div className="log">
                    <input type="checkbox" />阅读并接受<span>《百度用户协议》</span>及<span>《百度隐私权保护声明》</span>
                </div>
            </div>
        </div>
    }
}